<template>
	<page-meta>
		<navigation-bar title="注册账户" background-color="#354e44" />
	</page-meta>
	<view class="register">
		<image @tap="chooseImage" class="register-img" :src="form.icon"></image>
		<input class="register-input" type="text" v-model="form.phone" placeholder="手机号" />
		<input class="register-input" :type="changePassword" v-model="form.password" placeholder="请输入登录密码" />
		<input class="register-input" type="text" v-model="form.username" placeholder="请输入用户名 该用户名将用于账户登录" />
		<input class="register-input" type="text" v-model="form.nickname" placeholder="请输入昵称" />
		<view class="sure">

			<input class="register-input" type="text" v-model="sure" placeholder="请输入验证码" />
			<view class="sure-title">获取验证码</view>
		</view>
		<view @tap="registerNow" class="submit">注册</view>
		<view class="agree">
			<checkbox class="agree-checkbox" id="agree" :checked="agree"></checkbox>
			<text class="agree-title">同意协议</text>

		</view>
	</view>
</template>

<script>
	import {
		showTip
	} from '../../../utils/index.js'
	import baseUrl from '../../../api/baseUrl.js'
	import {
		register as registerApi
	} from '../../../api/user/index.js'
	//导入验证js
	import WxValidate from "../../../utils/WxValidate.js";
	export default {
		data() {
			return {
				img: 'http://jinglins.gitee.io/leju/static/icons/leju-logo.png',
				form: {
					icon: '',
					// phone:'',
					// username:'',
					// password:'',
					// nickname:''
				},
				sure: '', //验证码
				agree: false, //同意协议
				changePassword:'password'
			}
		},
		onLoad() {
			this.initValidate();
			if (!this.form.icon.length) {
				this.form.icon = this.img;
			}
		},
		methods: {
			//表单提交
			registerNow(e) {
				let params = this.form;
				console.log('params=>',params);
				if (!this.WxValidate.checkForm(params)) {
					//表单元素验证不通过，此处给出相应提示
					let error = this.WxValidate.errorList[0];
					showTip(error.msg, 'error');
					// console.log('验证失败');
				}else{
					// 验证成功
					console.log('验证成功');
					registerApi({
							"icon": this.form.icon,
							"nickname": this.form.nickname,
							"password": this.form.password,
							"phone":this.form.phone,
							// "realname": "string",
							// "sex": 0,
							"username": this.form.username
							// "wxOpenId": "string"
						})
						.then(res => {
							showTip('注册成功','success');
							setTimeout(()=>{
								uni.navigateTo({
									url:'../login/login'
								})
							},1000)
							
						})
				}
				
			},
			//选择图片
			chooseImage() {
				var that = this;
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log('成功', res);
						uni.uploadFile({
							name: 'file', //name值必须写,文件对应的key值,根据Key值获取图片的二进制内容,根据后台写的name来改变
							url: baseUrl +
							'/lejuClient/login/uploadAvatar', //服务器地址,这个地址不用封装,因为不是通过request请求的
							filePath: res.tempFilePaths[0], //上传的文件,临时文件路径
							timeout: 5000,
							success: (res) => {
								that.form.icon = JSON.parse(res.data).data.fileUrl;
							},
							fail: (err) => {
								console.log('上传失败', err);
							}
						})
					},
					fail: () => {
						console.log('失败');
					}
				})
			},
			//表单验证

			initValidate() {
				let rules = {
					icon: {
						required: true
					},
					phone: {
						required: true,
						tel: true
					},
					password: {
						required: true,
						rangelength: [6, 10]
					},
					username: {
						required: true,
						maxlength: 10
					},
					nickname: {
						required: true,
						maxlength: 6
					}
				}

				let message = {
					icon: {
						required: '头像必须传输'
					},
					phone: {
						required: '请输入电话号码',
						tel: '请输入有效的电话号码'
					},
					password: {
						required: '请输入密码',
						rangelength: '请确保密码长度在6-10位'
					},
					username: {
						required: '请输入姓名',
						maxlength: '名字不能超过10个字'
					},
					
					nickname: {
						required: '请输入姓名',
						maxlength: '名字不能超过6个字'
					}
				}
				//实例化当前的验证规则和提示消息
				this.WxValidate = new WxValidate(rules, message);

			},

		}
			
	}		
</script>

<style lang="scss" scoped>
	.register {
		overflow: hidden;
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #f0ebe6;
		box-sizing: border-box;
		padding: 0 30rpx;

		&-img {
			display: block;
			width: 160rpx;
			height: 160rpx;
			margin: 60rpx auto 100rpx;
			border-radius: 50%;
		}

		&-input {
			border: 1rpx solid #ccc;
			height: 100rpx;
			width: 100%;
			background-color: #f0ebe6;
			text-indent: 30rpx;
			border-radius: 50rpx;
			margin-bottom: 40rpx;
			font-size: 28rpx;
			outline: none;
		}

		.sure {
			position: relative;

			&-title {
				position: absolute;
				right: 30rpx;
				top: 50%;
				font-size: 28rpx;
				transform: translateY(-50%);
				color: gray;
			}
		}

		.submit {
			width: 100%;
			height: 100rpx;
			background-color: #354e44;
			color: #fff;
			text-align: center;
			line-height: 100rpx;
			border-radius: 50rpx;
		}

		.agree {
			margin-top: 50rpx;
			width: 100%;
			text-align: center;



			&-title {
				font-size: 28rpx;
				color: gray;
			}
		}
	}

	::v-deep uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
		content: "\e602";
		// text-align: center;
		font-size: 100rpx;
		font-family: "iconfont";
	}

	::v-deep uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
		// border: 1px solid gray;
		// border: 2rpx solid gray;
		outline: 1px solid #333;
		color: gray;
	}
</style>
